<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="example">
	<p>message:{{message}}</p>
	<p>revermessage:{{revermessage}}</p>
</div>


<div id="vm1">
<div class="status" :class={active:isActive} :style="styleObject">
胡歌 离歌笑
</div>
</div>

<script>
	var vm=new Vue({
	el:"#example",
	data:{
		message:"hrllohurejcjdddc"
	},
	computed:{
		revermessage:function(){
			return this.message.split('').reverse().join('')
		}
	}	
});
	
	var vm1=new Vue({
	el:"#vm1",
	data:{
		isActive:true,
		styleObject:{
			color:'#C4678d',
			fontSize:'30px'
		}
	}
});

</script>
</body>
</html>
